<script setup lang="ts">
defineOptions({
  name: 'ReadonlyEditButton',
})

withDefaults(
  defineProps<{
    readonly: boolean
    deleteable?: boolean
    size?: 'small' | 'mini' | 'medium' | 'large' | undefined
  }>(),
  {
    readonly: true,
    deleteable: true,
    size: 'small',
  },
)

const emit = defineEmits<{
  (e: 'update:modelValue', value: any): void
  (e: 'edit'): void
  (e: 'save'): void
  (e: 'delete'): void
  (e: 'cancel'): void
}>()
</script>

<template>
  <a-space v-if="readonly">
    <slot name="extra" />
    <a-button v-if="deleteable" class="btn" type="text" status="danger" :size @click="emit('delete')">
      <template #icon>
        <icon-delete />
      </template>
      删除
    </a-button>
    <a-button class="btn" type="outline" :size @click="emit('edit')">
      <template #icon>
        <icon-edit />
      </template>
      编辑
    </a-button>
  </a-space>
  <a-space v-else>
    <a-button class="btn" type="outline" :size @click="emit('cancel')">
      取消
    </a-button>
    <a-button type="primary" :size @click="emit('save')">
      保存
    </a-button>
  </a-space>
</template>

<style scoped>

</style>
